<template>
  <div class="max">
    <p class="je">选择充值金额</p>
    <div class="sl">
      <div class="box1">
        <div class="much" @click="checked01()" >
          <input class="m1" value="1000" disabled="disabled">
          <img v-if="much == 1000" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much" @click="checked02()" >
          <input class="m1" value="500" disabled="disabled"/>
          <img v-if="much == 500" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much"  @click="checked03()">
          <input  class="m1" value="300" disabled="disabled"/>
          <img v-if="much == 300" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
      </div>
      <div class="box1">
        <div class="much"  @click="checked04()" >
          <input  class="m1" value="200" disabled="disabled"/>
          <img v-if="much == 200" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much"  @click="checked05()" >
          <input  class="m1" value="100" disabled="disabled"/>
          <img v-if="much == 100" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much"  @click="checked06()" >
          <input  class="m1" value="50" disabled="disabled"/>
          <img v-if="much == 50" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
      </div>
      <div class="box1">
        <div class="much"  @click="checked07()" >
          <input  class="m1" value="30" disabled="disabled"/>
          <img v-if="much == 30" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much"  @click="checked08()" >
          <input  class="m1" value="10" disabled="disabled"/>
          <img v-if="much ==10" src="/static/imgs_s06/s06_trigon.png" alt />
        </div>
        <div class="much">
          <input class="m1" v-model="much" placeholder="自定义金额"/>
        </div>
      </div>
      <button @click="pay(much)" >立即充值</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      much:''
    };
  },

  components: {},

  methods: {
   checked01:function(){
     this.much=1000;
   },
  checked02:function(){
     this.much=500;
   },
   checked03:function(){
     this.much=300;
   },
   checked04:function(){
     this.much=200;
   },
   checked05:function(){
     this.much=100;
   },
   checked06:function(){
     this.much=50;
   },
   checked07:function(){
     this.much=30;
   },
   checked08:function(){
     this.much=10;
   },
    pay:function(much){
      wx.navigateTo({ url: '/pages/s06_Quick_payment/main?much='+much });
    }  
  },

  created() {
  
}
}
</script>
    <style>
.max {
  width: 100%;
  overflow: hidden;
}

.je {
  font-size: 15px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 21px 0 25px 16px;
}

.sl {
  display: flex;
  flex-direction: column;
  margin: 0 0 65px 15px;
}

.box1 {
  display: flex;
  flex-direction: row;
}

.much {
  position: relative;
  width: 100px;
  height: 60px;
  text-align: center;
  border: 1px solid #ddd;
  margin-right: 22px;
  margin-bottom: 22px;
}

img {
  position: absolute;
  left: 77px;
  top: 41px;
  width: 20px;
  height: 19px;
}

.m1 {
  margin-top: 20px;
  font-size: 17px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 60px;
}

.m2 {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  line-height: 60px;
}

button {
  width: 345px;
  height: 39px;
  background: rgba(50, 178, 108, 1);
  border-radius: 20px;
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  /* line-height: 20px; */
  margin-top: 65px;
}
</style>
